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Foreword 


Welcome to “HTML and CSS for Newbies”! 


In the ever-evolving landscape of technology, the ability to 
understand and utilize programming languages has become 
increasingly valuable. Among these languages, HTML and CSS 
serve as the fundamental building blocks of the web. Whether 
you're a budding developer, a curious beginner, or simply 
someone looking to expand their digital skill set, this book 
is designed to provide you with a solid foundation in HTML 
and CSS. 


As the author of this book, Tatenda Josiah Majira, understands 
the challenges that newcomers face when diving into the world 
of web development. He has crafted this guide with the aim 
of demystifying HTML and CSS, making them accessible to 
anyone with the desire to learn. Through clear explanations, 
practical examples, and hands-on exercises, Tatenda will take 
you on a journey from the basics to more advanced concepts, 
empowering you to create your own web pages and style them 
to perfection. 


Whether you dream of building your own website, pursuing a 


Vv 


career in web development, or simply want to better understand 
the technology shaping our digital world, “HTML and CSS for 
Newbies” is your starting point. Embrace the adventure ahead, 
and let’s embark on this learning journey together. 


Happy coding! 


Tatenda Josiah Majira 
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Introduction 


In the vast landscape of web development, HTML and CSS 
stand as the cornerstone technologies that shape the digital 
world we interact with every day. HTML (Hypertext Markup 
Language) provides the structure and content of web pages, 
while CSS (Cascading Style Sheets) adds the visual presentation, 
defining how those pages look and feel. 


HTML serves as the skeleton of the web, providing a markup 
language that structures content into elements such as headings, 
paragraphs, images, and links. It forms the backbone of every 
web page, organizing information in a hierarchical manner and 
creating the foundation upon which websites are built. 


On the other hand, CSS is the stylistic layer that breathes life 
into HTML elements. With CSS, developers can control the 
layout, typography, colors, and overall appearance of a web 
page. By separating the content from its presentation, CSS 
enables flexibility and consistency across a website, making it 
easier to maintain and update. 


Together, HTML and CSS empower developers to create 
stunning and interactive web experiences that engage users 
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and deliver information effectively. Whether you're building a 
personal blog, an e-commerce platform, or a corporate website, 
mastering these technologies is essential for anyone venturing 
into the realm of web development. 


In this book, we'll embark on a journey to explore the funda- 
mentals of HTML and CSS, from the basics to more advanced 
concepts. We'll learn how to structure web pages, style them 
with CSS, and create responsive designs that adapt to different 
devices and screen sizes. Along the way, we'll build practical 
projects and gain hands-on experience to solidify our under- 
standing of these essential web technologies. 


Whether you're a complete beginner or an experienced devel- 
oper looking to brush up on your skills, this book is designed 
to be your comprehensive guide to HTML and CSS. Let’s dive 
in and unlock the endless possibilities of web development 
together. 
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Chapter 1 


Getting Started 


Text editor 


First of all for you to start writing html or css you need to 
have a text-editor in your laptop or phone .A text editor is an 
application for writing text and saving them as a file eg Notepad 


Examples of text editors : 
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s a 
Brackets oO 


Sublime Text 


lotepad 


CoffeeCup 


TextMate 


I recommend you to download Sublime-text because its small 
in size and easy to use .To install go to sublime https://www.su 
blimetext.com/3 


Steps on how to create a new html page file 


1. Click File 
2. Click New File 
3. Press CTRL + S to save 
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6 untitled - Sublime Text (UNREGISTERED) = x 


File Edit Selection Find View Goto Tools Project Preferences Help 


The window below will pop up after pressing CTRL + S and 
then you type the name you want to give to the page Inside the 
File name box is where you type the name you want to give to 
your html file. 
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x 
vd Search Documents Pp 
E+ @ 
Date modified Type tel 
8/6/2022 1:51AM _File folder 
ae 7/26/2022 4:40PM File folder 
+ 7/6/2022 6:50 PM ilefolder 
ae B yWriter Projects 9/9/2022 2:47 PM File folder 
2} Mente G} Chapter 5 R2020250 Tatenda Majira 7/5/2022 3:29PM DOCX Document 
a) Pichwes Gy CODES 8/7/2022 9:17PM — DOCX Document 
BH Videos IMG-20220715-WA0004 7/13/2022 5:06PM JPG File 
dy Local Disk (C:) java 6/27/2022 2:03 PM _ IntelliJ IDEA Com, 
(© CD Drive (03 16. &@} R202025Q TATENDA MAJIRA DAA 7/5/2022 2:58PM DOCX Document 
on Wentkowes Apa (} SUPPORTED APPLICATIONS 9/29/2022 4:00PM — DOCX Document y 
. > 
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Ei save As x 
€ » 4 [| > ThisPC > Documents ¥ & Search Documents Pp 
Organize v New folder f= v (2) 
a 
(9 This Pc s Name Date modified Type s 
I Desktop i Bandicam 8, 22 1:51 AM File folder 
Ee) SSeS B Custom Office Templates 022 4:40 PM File folder 
ry Sonalcadis BE Image-Line (2022 6:50 PM File folder 
B yWriter Projects File folder 
d Music a . 
= aM Chapter 5 R202025Q Tatenda Majira DOCX Document 
| Pictures @} copes DOCX Document 
BB Videos {it IMG-20220715-Wwa0004 JPG File 
iy Local Disk (C:) Bi iave IntelliJ IDEA Com. 
(2 CD Drive (D:) 16. (@} R202025Q TATENDA MAJIRA DAA 7 DOCX Document 
Windows Apps ( (@} SUPPORTED APPLICATIONS 8/29/2022 4:00PM = DOCX Document y 
aoe een M4 > 
File name: v 
Save as type: All Files (*.*) v 
«@ Hide Folders Cancel 


Note that after typing the name of page put .html so that it will 
be saved as a webpage for it to open on a browser .The name of 
my page is newbies.html. 

If you don’t add -html on the file name of your page it won't 
open on browsers. 

The same steps are done when you want to create a css file 
.The difference is that when it is css you save your file as name 
of file .css . 
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newbies 


Your html file should have an icon of a web browser you use 
.Mine has a google chrome icon because my default browser is 
google. 
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How to save and run HTML 
code in windows 


* Start Notepad. 

* Type in the given text 

* Save the file as “anyname.htm". 
* Start your Internet browser. 


* Select "Open" (or "Open Page") in the File menu 
of your browser. A dialog box will appear. 


* Select "Browse" (or "Choose File") and locate the 
HTML file you just created select it and click 
"Open". Now you should see an address in the 
dialog box, which is showing your file path. Now 


Click OK, and the browser will display the page. 


HTML Elements (TAGS) 


+ <html>..</html>: This tag tells your browser 
the start and end of an HTML 
document. 

+ <head>.</head>: This tag contains the header 
information, which is not 
displayed in the browser window. 

+ <title>.</title>: This tag contains the title of your 

document. The title is displayed in 
your browser's caption. 

* <body>..</body>: This tag contain the text that will 
be displayed in your browser. 


Chapter 2 
Introduction 
What is HTML and CSS ? 
HTML Ess 


CHAPTER 2 


HTML 


HTML stands for Hypertext Markup Language.HTML defines 
the structure of web page. 

Don't forget HTML defines the skeleton of a web page eg 
paragraphs ,headers ,footers ,sections etc 


CSS 


HTML stands for Cascading Style Sheets.CSS defines the style 
( visual ) of web page. 

Don't forget HTML defines the skin of a web page eg color 
sbackground ,font ,border etc 
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HTML + CSS 


From the above example the skeleton represents HTML and 
then the man in suit represents CSS . The clothes and skin is 
what we are calling styling or CSS. 


CHAPTER 2 


Differences between HTML and CSS 


<> {} 


If HTML is the skeleton of your page, CSS is the skin .Without 
CSS, your websites would look rather boring, dull, and, dare we 
say, naked. In CSS, there is a property and a value. Property is 
the quality you want to change; value is the amount of change. 


1. HTML is basically a standard markup language for describ- 
ing the structure of web pages, whereas CSS is the style sheet 
language for describing the presentation and design of web 


pages. 


2. HTMLis easy to learn and has clear syntax, whereas CSS can 
sometimes get messy and can create complications in codes. 


3. CSS is independent of HTML, and it can be used with any 
XML-based markup language, whereas this is not the same case 
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with HTML. 


4. The HTML file can contain CSS codes, but on the other 
hand, CSS can never contain HTML codes in it. 


5. HTML provides tags which are surrounding the content 
of any web page elements, whereas CSS consists of selectors 
which are surrounded by a declaration block 


6. CSS has fragmentation, but HTML doesn’t produce any such 


problems. 7. CSS uses a much lesser code and thus produce 
much lesser web page loading time than HTML 
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Chapter 3 


HTML AND CSS FOR NEWBIES 


HTML 


<HTML TAGS> 
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CHAPTER 3 


Element name \ 


Opening tag Closing tag 


Element Element 
<br>, chro, 
Self-Closing Tag Self-Closing Tag 
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HTML Page Structure 


<!DOCTYPE html> 9 <<——————Teells version of HTML 
<html> = =<————. HTML Root Element 


<head> <——— Used to contain page HTML metadata 
<title>Page Title</title> <—Title of HTML page 
</head> 


<body> § <————— Hold content of HTML 
<h2>Heading Content</h2>  <——————- HTML heading tag 


<p>Paragraph Content</p> ¢———___. stay, paragraph tag 
</body> 


</html> 
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CHAPTER 3 
There many HTML tags but we going to show you 
the basic and most important ones so that you 


might be able to make your own basic web page 
after reading this book. 


HTML tags and their descriptions 
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Tags 
<html> </html> 
<head></head> 
<title></title> 
<body></body> 
<a></a> 
<abbr></abbr> 
<b></b> 
<i></i> 
<big></big> 
<small></small> 
<blockquote> </blockquote> 


Description 
This defined “HTML” documents 
This define “Head” part of program 
This defined “TITLE” of document. 
This defined “main content” of program 
This is “Anchor “ tag 
This is “Abbreviation” tag. 
This defined “Bold “ text 
This define “Italic” test 
This define “big text “then normal. 
This define “small text “ then normal 
This defined special “speech” 


<br/> 
<code></code> 
<table></table> 
<col></col> 


<td></td> This used make to “table sell” 


<tr></tr> 
<form></form> 
<h1></h1> 
<hr/> 


<img/> This used adding “image” 


<input></input> 
<li></li> 


<meta></meta> This is” meta tag” 


<ol></ol> 
<ul></ul> 


This make “line brake” 

This defined “ code text” of computer. 
This used make to “table” 

This used make to “table column.” 


This used make to “table row ” 

This used for making “form” 

This used header tag, there are upto 1-6 
This used making “parallel line” 


This used for “input field” 
This used for “list” 


This used for “order list” 
This used for “unorder list” 


<p></p> 
<pre></pre> 
<tt></tt> 
<strong></strong> 
<sub></sub> 
<sup></sup> 


This used for “paragraph” 

This used for “pre-formatted” 

This used for “tale type text” 

This used for “Strong text” 

This is used for “subscripted text” 
This used for “superscripted text” 


Example of a basic HTML page 
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CHAPTER 3 


>Webpage</ 
> 
> 


>Welcome to Webpage </h1> 


<p>A page to show you how to code using html </p> 


> 


@ Webpage a x + 


CC @ File | C:/Users/JIREX/Desktop/newbies.html 


M Gmail €@ YouTube ad Maps 


Welcome to Webpage — 


A page to show you how to code using html as. 


Note the highlighted text are the tags that are inside the body 
tag <p></p> and <h1></h1> 
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Chapter 4 


<meta> 


<meta name=“description” content="Teaching newbies how to 


code using HTML and CSS”> 


meta element 


Spi name:"deseription" content: "Wa is a page description» 


20 


value for 


“content 


CHAPTER 4 


Information or values that are put inside the meta tag are the 
one that we see when we search for something as on the picture 
below 


Meta tags - Webmaster Tools Help - Google Help << ~ mete aitle 
ttps://support google.com/webmasters/answer/79812?hi=en + 

Meta tags are a great way for webmasters to provide search engines with information 

about their sites. Meta tags can be used to provide information to all sorts ... = 

What is meta tag? - A Word Definition From the Webopedia ... meta deserietion 
www.webopedia.convTERM/M/meta_tag.htmi ~ 

This page describes the term meta tag and lists other pages on the Web where you can 

find additional information 


Useful HTML Meta Tags - cache, no-cache, robots. refresh, content ... 
www.i18nguy.com/markup/metatags.htm! ~ 

Useful HTML Meta Tags are listed and described, and example usages are given. Links 
to other resources are also provided 


21 


Chapter 5 


<head> </head> 


Inside the head tag is where we find meta tag, style tag (where 


we put our CSS ) and links. 
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Chapter 6 


<body> </body> 


The <body> tag defines the document’s body. The <body> 
element contains all the contents of an HTML document, such 
as headings, paragraphs, images, hyperlinks, tables, lists, etc. 
Note: There can only be one <body> element in an HTML 
document. 
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Chapter 7 


<h1></1> to <h6></h6> 


These tags are used to define HTML headings. 


>Newbies</h1> 
<h2>NewbiesNewbies</!2> 
>Newbies</h3> 
>Newbies</h4> 
<hS>Newbies</h5> 
>Newbies| / > 
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CG @ File | C:/Users/JIREX/Desktop/newbies.html 
™M Gmail @@ YouTube BF Maps 
A 
Newbies 
NewbiesNewbies 
Newbies 
Newbies 
Newbies 


Newbies 


If you notice each and every H tag represents a certain size for 


a text. 
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Chapter 8 


<p></p> 


This tag defines a paragraph. 


<p>I am a newbie and i want to learn html</p> 


</ >| 
</ > 
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Cc. @ File | C:/Users/JIREX/Desktop/newbies.html 


M Gmail €@ YouTube BF Maps 


Tam a newbie and 1 want to learn html 
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Chapter 9 


<img> 


The <img> tag is used to embed an image in an HTML page. 
Images are not technically inserted into a web page; images 


are linked to web pages. The <img> tag creates a holding space 
for the referenced image. 


The <img> tag has two required attributes: 
+ src - Specifies the path to the image 


+ alt - Specifies an alternate text for the image, if the image 
for some reason cannot be displayed 
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C @ File | C:/Users/JIREX/Desktop/newbies.html 


™ Gmail €@ YouTube vad Maps 


MIiML @ Css 


For Newbies 


MAJIRA UPPER BOUND 


"description" “Teaching newbies how to code using html and css"> 
stylesheet" t text/css" me 
text/css">< > 


newbies/newbies. jpg” 
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Note that inside the source (src) is where u put the path where 
the image is located on and then the image name .In the above 


example the name of my image is newbies.jpg. Make sure the 
html file is in the same folder with image and CSS files. 


sick 


a f z aa 5 = mm > 
f oO & cut ie {2 x =f i Ty New item | Open> Ff Select all 
= 3 Copy path ¥] Easy access > = Edit 
Py aste Move Copy Delete Rename New 
[2] Paste shortcut * tor . folder 


Select none 


Properties 
+ W@History invert selection 


e elect 
€ ~ 4s > ThisPC > Desktop > newbies 

HQuickaccess Name Date modified Type Size 

ites icine @ newbies 9/12/2022 1:48PM — Chrome HTML Do. 1KB 

1 newbies 9/9/2022 4.24PM JPG File 1,361 KB 

Wa This Pc 

i Desktop 

| Documents 

} Downloads 

d Music 

(© Pictures 


31 


10 


Chapter 10 


<li> </li> 


These tags are used to group a set of related items in lists 


An unordered HTML list: An ordered HTML list: 
¢ Item 1. First item 
e Item 2. Second item 
* Item 3. Third item 
* Item 4. Fourth item 
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CHAPTER 10 


Unordered List <ul></ul> 


An unordered list starts with the <ul> tag.Each list item starts 
with the <li> tag. 


>Item</ 


>Item</ 
>Item</ 


>Itenk/ 


Ordered List <ol></ol> 


An ordered list starts with the <ol> tag. Each list item starts 
with the <li> tag. 
The list items will be marked with numbers by default: 


The HTML <ol> tag defines an ordered list. An ordered list can 
be numerical or alphabetical. 
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>First item</1i> 
>Second item</1i> 
>Third item</1i> 
>Fourth item</1li> 


34 


11 


Chapter 11 


<table></table> 


Theses tags are used to arrange data into rows and columns. 
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>Brand</ 
>Color</ 
>Price</ 


>Toyota</tc> 
>Red</td> 
>China</tc> 


>BMW</tc> 
>Silver</tc> 
>Germany\/ > 


Cc @ File | C:/Users/JIREX/Desktop/newbies.html 


M Gmail €§ YouTube QF Maps 


Brand Color Price 
ToyotaRed China 
BMW Silver Germany 
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Chapter 12 


<input> 


These tags are used when we want to get user input from eg 
register form, login form. 


Types of input elements : 


<input type=“button”> 


<input type=“checkbox”> 


<input type=“color’> 


<input type=“date”> 


<input type=“datetime-local”> 


<input type=“email’”> 


<input type=“file”> 


<input type=“hidden’> 


<input type=“image”> 


<input type=“month’> 


<input type=“number”> 
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<input type="“password”> 
<input type=“radio”> 
<input type=“range”> 
<input type="reset”> 
<input type=“search’> 
<input type=“submit”> 
<input type=“tel’”> 
<input type="text”> 
<input type=“time”> 
<input type=“url”> 
<input type=“week”> 
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"“button"> 
"“checkbox"> 
“color"> 

"“date"> 
"datetime-local"> 


"hidden"> 

“image"> 
month"> 
number"> 
password"> 


“range"> 
"reset"> 
"search"> 
submit"> 
el"> 
"text"> 


</body> 


|= [Bhoase File] No fle chosen ++ LesSubmit « [=== 
+ Suto] «| 


As you can see the output of the inputs tags on the webpage 
presented well .To put them in order we use the <br> it breaks 
or creates a new empty line 
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newbies.ntm! 


<link 
<style 


</head> 


<input tyr 


<br> 

. <input 
<br> 

e <input 
<br> 

e <input ty 
<br> 

. <input 
<br> 

e <input ty 
<br> 

e = <input 
<hr> 
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tylesheet" "text/css" h 
“text/css"></style> 


“button"> 


"“date"> 


“datetime-local"> 


“month"> 
“number"> 


“password"> 
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<br> 

e <input 
<br> 

. <input 
<br> 

e <input 
<br> 

e <input 
< 

e <input 
<br> 

e <input 
<br> 

e <input 
<br> 

e <input 
<br> 

e <input 
<br> 

e <input 
<br> 

e <input 
<bro| 

. <input 


</body> 
</html> 


CHAPTER 12 
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CO File | C:/Users/JIREX/Desktop/newbies.html 
™ Gmail © YouTube BF Maps 


_ 
«|mm/dd/yyyy ©] 
«|mm/dd/yyyy --:-- -- © 


+| Choose File | No file chosen 


+ |pSubmit 


«| Submit | 


slweek --, ---- 6] 


Type Description 
<input type="text"> Displays a single-line text input field 
<input type="radio"> Displays a radio button (for selecting one of many choices) 
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices) 
<input type="submit"> Displays a submit button (for submitting the form) 


<input type="button"> Displays a clickable button 


The name of the input element determines type of data allowed 
or the output to b displayed on the page .For you to be able to 
collect information from the user most of the input elements 


are put inside the form tag <form><form> which we will talk 
about in next chapter. 
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Chapter 13 


<form> </form> 


This <form> element is used to create an HTML form for user 
input: 
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<label> </label> 


The <label> tag defines a label for many form elements. 

The <label> element is useful for screen-reader users, because 
the screen-reader will read out loud the label when the user 
focus on the input element. 


e">First name:</ 


e">Last name:</ 


The id attribute specifies a unique id for an HTML element. 
The value of the id attribute must be unique within the HTML 
document. 

The id attribute is used to point to a specific style declaration 
in a style sheet. 
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<— > CGC @O File | C:/Users/JIREX/Desktop/newbies.html 
™M Gmail @@ YouTube @ Maps 


First name: 


{_ 


Last name: 
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Chapter 14 


“ 


<a href =“ ></a> 


Links are found in nearly all web pages. Links allow users to 
click their way from page to page. 

Links - Hyperlinks 

HTML links are hyperlinks. 

You can click on a link and jump to another document. 

When you move the mouse over a link, the mouse arrow will 
turn into a little hand 

<a href =“url”>link text</a> 

The most important attribute of the <a> element is the href 
attribute, which indicates the link’s destination. 

The link text is the part that will be visible to the reader. 

Clicking on the link text, will send the reader to the specified 
URL address. 


<a href=“https://www.google.com/”>Google</a> 


46 


CHAPTER 14 


>Google</ => 


> CO File | C:/Users/JIREX/Desktop/newbies.html 


™M Gmail © YouTube & Maps 


S 


ogl 


If you click on the text Google it will direct you to Google page 
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€ @  @ googlacom 
M1 Gmail (EB YouTube BY Maps 


ins 


Gmail Image 


Google 


= 


Google Search I'm Feeling Lucky 


Google affered in ChiShona isiZulu Chichewa Setswana 


Links or <a></a> can be used to link your html pages .In 
the following example we going to create a html file called 
newbies2.html so that we can locate it from newbie.html we 
have already created. Make sure both your html files are in the 
same folder. 


Ei Save As x 
© » 4 > ThisPC > Desktop » newbies vv Search newbies -p 
Organize ¥ New folder cE e 
WB This Pc bl Name = Date modified Type 
[BB Desktop @ newbies 9/12/2022 1:48 PM Chrome HTML Do... 


(=) Documents {it} newbies 9/9/2022 4:24PM —JPG File 


. o Downloads 
d Music 
=) Pictures 
BB Videos 
‘ky Local Disk (C:) 
© CD Drive (D:) 
wa Windows Apps ( 
a ie 


2 ore eens > 
File name: | s 
Save as type: All Files (*.*) v 


” Hide Folders Cancel 


Inside the newbies2.html file write 
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is} C:\Users\JIREX\Desktop\newbies\newbie2.html - Sublime Text (UNREGISTERED) 
File Edit Selection Find View Goto Tools Project Preferences Help 


newbie2.htm! 


<p>Welcome to newbies2 page<p>| 


Now go to the newbie.html file and put a link like below. 


<IDOCTYPE html> 
<html> 


ent="Teaching newbies how to code using html and css"> 
" hrefs=""> 
<style 


</head> 
<body> 


<a href="newbies/newbies2. html" >Newbies2</a> 


</body> 
</html> 


Now click on the link below and it will direct you to newbies2 
page. 
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> CC @ File | C:/Users/JIREX/Desktop/newbies.html 


M Gmail €@ YouTube vad Maps 


Newbies? 
Newbies2 page 
€ CO File | C:/Users/JIREX/Desktop/newbies/newbies2.html 


™M Gmail © YouTube &F Maps 


Welcome to newbies2 page 


So far we have covered the basic and most important html 
elements therefore what is left is for you to know how to style 
html elements 
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<style></style> 


The HTML style attribute is used to add styles to an element, 
such as color, font, size, and more. 
<tagname style=“property:value;”> 


This tag can be used inside the head tag to style elements inside 
the body but for the mean time will focus on styling inside the 
tag. 
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ewbies.ntmi 


<! 


></ 


="background-coLor: powderblue; "> 


<hl>This is a heading</h1> 
<p>This is a paragraph.</p> 


</ 


</ 
</ 


> CGC. @ File | G/Users/JIREX/Desktop/newbies.html 


M Gmail ©@ YouTube BF NV 


This is a heading 


This is a paragraph 
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Id and class 


The following are the important differences between Id and Class. 


Sr. No. Key Id Class 
Syntax In Html for an element ID name starts On the other hand class assigned to 
1 with the “#” symbol followed by a an element has its name starts with “.” 
unique name assigned to it. followed by class name. 


Selector Only one ID selector can be attached Multiple class selectors can be 
to an element. attached to an element. 


Uniqueness Id is unique ina page andcanonly — Theclass can be applied to multiple 
3 apply to at most one element elements so it could be multiple times 
on a single page. 
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ss="newbies">Newbies c 


“newbies">Newbies ae 
tl 


ass</p> 


Below is how you use the IDs and Classes inside the <style> 
using css . 


CTYPE html> 
<html> 


<head> 


"Teaching newbies how to code using html and css"> 
/css" href=""> 
text/css" 


</style> 


</head> 
<body> 
<p i ibies">Newbies id</p> 
<p ="newbies">Newbies class</p> 


</body> 


</body> 
</html> 
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Like discussed in the the first chapter css is used for styling the 
html page or elements . 
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Summary of the syntax for the three style types 


With inline styles: 
- styles are written directly inside the tag 
- style= attribute is used 
- the property / value pairs are in quotes 
- styles apply only to the current tag 


With internal styles 
- the styles are placed in the <head> section 
- <style> </style> tags are used 
- the property / value pairs are placed inside curly braces 
- styles apply to all instances of the tag (selector) in the current web page 


With external style sheets 
- styles are written out in a separate (external) document — a text file with a CSS extension 
- <style> </style> tags are NOT used -- in fact, no HTML should be present 
- the property / value pairs are in curly braces 
- styles apply to all instances of the tag (selector) on all web pages that are linked to the 
style sheet 


Example: 


>Newbies </p> 
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External stylesheet is circled in red 
Internal stylesheet is circled in blue 
Inline stylesheet is circled in yellow 
Tips: 


Inline CSS 


<p style="color: blue;">This is a paragraph.</p> 


Internal CSS 


<head> 
<style type = text/css> 
body {background-color: blue; } 
p { color: yellow; } 
</style> 
</head> 


External CSS 


<head> 
<link rel="stylesheet” type="text/css” href="style.css”> 
</head> 


We can link styles.css to newbies.html by adding the following 
line to the <head> of our HTML doc: 
<head> 


_ 
<link rel=“stylesheet” href=“css/style.css’></head> 
How to create an external stylesheet 


Create a new file and name it styles.css .CSS files are saved 
with .css so that the styles will load and not be respond as plain 
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text. 


BG C:\Users\JIREX\Desktop\styles.css - Sublime Text (UNREGISTERED) 


File Edit Selection Find View Goto Tools Project Preferences Help 
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| EB Save As x 
= ~ Lj > ThisPC >» Desktop » newbies vv Search newbies oo) 
Organize ¥ New folder ath 2 
a This PC o Name 7 Date modified Type 
I Desktop No items match your search 


[| Documents 

} Downloads 

dD Music 

©) Pictures 

BB Videos 

‘ky Local Disk (C:) 

( CD Drive (D:) 

we Windows Apps ( 
v 


aoe een > 


File name: | styles.css v 
Save as type: | CSS (*.css;*.css.erb;*.css.liquid) v 
«@ Hide Folders Cancel 


Inside the styles.css is where we put our css codes .Now we 
have to link our external css stylesheet (styles.css) inside the 
head of our newbies.html for us to be able to style the elements 
while we are not inside the html file. 
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<p>I am a newbie and i want to learn html</p> 


</ > 
</ > 
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SELECTOR PROPERTY VALUE 


p { color: blue; 


Common CSS Properties 


Color 
Font Size 
Background Color 
Background 
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Height/Width 

Box Model (Margin/Padding) 
Border 

Border Radius 


We are going to use the above css properties in our external 
stylesheet that we have created to style newbies.html 


Inside our newbies.html file put the following elements 


< > 
<hi>Newbiesk/ 


<p>I am a newbie and i want to learn html</p> 


</ > 
</ > 


Then inside our styles.css we going to start styling using the 
color property: 
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Color 


This is most used property in css It is used for changing the 
text color. 

There are multiple valid formats for color values, however 
the most common are hex values, rgba and named colors 


/* Hex Value */ 
color: #000000; 


/* RGBA */ 
color: rgba(0, 0, 0, 0.3); 


/* Named Colors */ 
color: black; 
As newbies using named colors is much easier and simple 
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* style.css 


C @ File | C:/Users/JIREX/Desktop/newbies/newbies.html! 


™ Gmail €@ YouTube nm Maps 


Newbies 


I am a newbie and 1 want to learn html = 
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Font Size 


This property is used to specify the size of text . 

The font-size property allows us to change the size of the font 
for any text based content. This includes <h1> to <h6> tags , 
<a> tag,<p> tags etc 
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CG @ File | C:/Users/JIREX/Desktop/newbies/newbies.html 


M Gmail €@ YouTube &f Maps 


Newbies 


I am a newbie and i want to learn html 


In real world we use cm or inches when specifying th size of 
something but in css and html we use pixels ( px ). 
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Background Color 


The background-color property allows you to set the 
background-color of an HTML element. Just like text color, 
the value of this property can be a hex value, rgba or named 
color. 

The background color can be set like so: 
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* style.css 


CGC @ File | C:/Users/JIREX/Desktop/newbies/newbies.html 


M Gmail © YouTube fF Maps 


I am a newbie and i want to learn html 
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Height/Width 


The height and width properties specify the height and width of 
a HTML element respectively. There are many different values 
you can apply to both of these properties, but for this tutorial 
we'll focus on pixels (px) and percentages (%) 


+ stylecss 
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Note that the width and height of the <p> text has changed 


M Gmail @@ YouTube &F Maps 


ewbies 


I am a newbie and i want 
to learn html 
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Border 


The border property allows you set a border for your HTML 
element. We can create a border around our <img> element 


with the following syntax: 
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name="description" content="Teaching newbies how to code using ht 
rel="stylesheet" type="text/css" href="style.css"> 


type="text/css"></ > 


>Newbies</hi> 
<p>I am a newbie and i want to learn html</p> 


newbies.jpg" P 


color: blue; 
font-size: 
height: 
width: 


{ 


background-coLor:blue; 
color: white; 


} 


{ 
width: 


height: i 
border: solid blue; 
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lam a newbie and 1 want 
to learn html 


As you can see the image is now surrounded by a blue border. 
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Background Image 


The background-image property allows us to add a background 
image to an HTML element. This is similar to the background 
color, however an image is shown instead of a color. 

We are going to put a background image on the h1 tag 
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Cc ® File | C:/Users/JIREX/Desktop/newbies/newbies.html 


M Gmail © YouTube BF Maps 


INewbies 


I am a newbie and i want 
to learn html 
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Border-Radius 


The border-radius property allows you to add rounded corners 
of a HTML elements. This can be especially useful for adding 
rounded corners to buttons and images. 

In action, if we wanted to round the corners of an <img> 
element, we could add the following in our stylesheet: 
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File Edit Selection Find View Goto Tools Project Preferences Help 


Note that the image will change on its corners after styling with 
border-radius property 
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> CGC @ File | C:/Users/JIREX/Desktop/newbies/newbies.html 


™ Gmail ©@ YouTube &F Maps 


lam a newbie and 1 want 
to learn html 


Text Properties 


Property Description Values 

[ color Sets the color of a text RGB, hex, keyword 
line-height Sets the distance between lines normal, number, length, % 

letter-spacing Increase or decrease the space between characters || normal, length 


text-align Aligns the text in an element left, right, center, justify 


[ text-decoration Adds decoration to text none, underline, overline, line-through 
text-indent Indents the first line of text in an element length, % 
text-transform Controls the letters in an element none, capitalize, uppercase, lowercase 
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List Properties 

Property Description Values 
Bs Sets all the properties for a list in one list-style-type, list-style-position, list-style-image, 
list-style 2 5 ‘i 

declaration inherit 

list-style-image |] Specifies an image as the list-item marker URL, none, inherit 
list-style- Specifies where to place the list-item 

5 i é . inside, outside, inherit 
position marker 


list-style-type Specifies the type of list-item marker 


none, disc, circle, square, decimal, decimal-leading- 
zero, 

armenian, georgian, lower-alpha, upper-alpha, lower- 
greek, 

lower-latin, upper-latin, lower-roman, upper-roman, 
inherit 


Border Properties 


Property 


Description 


Values 


border 


Sets all the border properties in one 
declaration 


border-width, border-style, border-color 


border-bottom 


Sets all the bottom border properties 
in one declaration 


border-bottom-width, border-bottom-style, border- 
bottom-color 


border-bottom-color 


Sets the color of the bottom border 


border-color 


border-bottom-style || Sets the style ofthe bottom border || border-style 
border-bottom- 
smear Sets the width of the bottom border |] border-width 
width 
SL h ber, rgb_numbe: t 
border-color Sets the color of the four borders ete a eh Aad al 
inherit 
Sets all the left bord ties i 
border-left ets ai tne tere morder properties i || border-left-width, border-left-style, border-left-color 


one declaration 


border-left-color 


Sets the color of the left border 


border-color 


border-left-style Sets the style of the left border border-style 
border-left-width __ |] Sets the width of the left border border-width 
ae ea eee border properties in poetical border-right-style, border-right- 
border-right-color __ || Sets the color of the right border border-color 
border-right-style |] Sets the style of the right border border-style 
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border-right 


Sets all the right border properties in 
one declaration 


border-right-width, border-right-style, border-right- 
color 


border-right-color 


Sets the color of the right border 


border-color 


border-right-style Sets the style of the right border border-style 
border-right-width Sets the width of the right border border-width 
hidden, dotted, dashed, solid, doubl 
border-style Sets the style of the four borders hei et sites Sains = if = ima tains Magatama cae) 
ridge, inset, outset, inherit 
Sets all the top bord rties i 
border-top Saas a ied sake ks al border-top-width, border-top-style, border-top-color 
one declaration 
border-top-color Sets the color of the top border border-color 
border-top-style Sets the style of the top border border-style 
border-top-width Sets the width of the top border border-width 
border-width Sets the width of the four borders thin, medium, thick, length, inherit 
Font Properties 
Property Description Values 
see font-style, font-variant, font-weight, font-size/line-height, font- 
Sets all the font properties in one é Paes i 
font a family, caption, icon, menu, message-box, small-caption, 
declaration 5 i 
status-bar, inherit 
font-family Specifies the font family for text | family-name, generic-family, inherit 
si : xx-small, x-small, small, medium, large, x-large, x-large, 
font-size Specifies the font size of text , A 
smaller, larger, length, %, inherit 
font-style Specifies the font style for text normal, italic, oblique, inherit 
Specifies whether or not a text 
font-variant should be displayed ina small-caps |] normal, small-caps, inherit 
font 
normal, bold, bolder, lighter, 
font-weight Specifies the weight of a font 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit 
Careful, many of these are not supported! 
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